<template>
  <div class="top-view">
    <div class="top-cuit">
      <img class="top-cuit-img" alt="成信大" src="../../assets/top-cuit.png" />
    </div>
    <div class="top-yjsc">
      <img alt="研究生处" src="../../assets/yjsc.png" />
    </div>
    <div class="top-right">
      <div class="top-right-link">
        <a class="top-right-a" href="#">学校主页</a>
        <span class="divi"> | </span>
        <a class="top-right-a" style="letter-spacing:1px;" href="#">ENGLISH</a>
        <span class="divi"> | </span>
        <a class="top-right-a" href="#">管理入口</a>
      </div>
      <el-input
        class="top-right-search"
        placeholder=""
        prefix-icon="el-icon-search"
        type="input"
      ></el-input>
    </div>
  </div>
</template>

<style lang="less" scoped>
.top-view {
  width: 100%;
  height: 150px;
  // border: solid 1px red;
  background: rgb(231, 231, 231) url(../../assets/top-back.jpg) no-repeat left;
  background-size: cover;
  display: grid;
  grid-template-columns: 36vw 24vw 38vw;
  color: black;

  .top-cuit {
    margin-bottom: 30px;
    // margin-left: 1vw;
    display: grid;
    align-items: end;
    justify-items: end;
    // border: solid 1px forestgreen;
    .top-cuit-img {
      height: 75px;
    }
  }

  .top-yjsc {
    display: grid;
    align-items: center;
    justify-items: start;
    // border: solid 1px forestgreen;
  }

  .top-right {
    margin-bottom: 35px;
    // margin-right: 2vw;
    display: grid;
    align-items: end;
    justify-items: end;
    grid-template-columns: 24vw 10vw;
    // grid-template-rows :30px;
    grid-gap: 0px 15px;
    // border: solid 1px forestgreen;
    .top-right-link {
      font-family: "Agency FB", "方正姚体";
      letter-spacing: -1px;
      // border: solid 1px forestgreen;
      .top-right-a {
        color: white;
        text-shadow: 2px 2px 3px #000;
      }
      .top-right-a:link {
        text-decoration: none;
      }
      .top-right-a:hover {
        /*鼠标悬停*/
        text-decoration: none;
        font-weight: 600;
      }
      .divi {
        color: ghostwhite;
      }
    }
    /deep/ .top-right-search .el-input__inner {
      height: 25px;
    }
    /deep/ .top-right-search .el-input__prefix {
      margin-top: -7px;
    }
  }
}
</style>
<script>
export default {
  name: "TopTitle"
};
</script>
